import $ from 'jquery';
import { EditorView, basicSetup } from "codemirror"
import { html } from "@codemirror/lang-html" 
import {p} from './ele'
export default class {
    #AllowAttrs = ["type","id","param"]
    SelectedRootDom; //选中的顶层dom
    CodeDom;
    CodeDomBox;
    EditorCodeClass;
    AlertDom;
    EditorDom;
    //属性回调,参数1：tag类型
    AttrClick;
    constructor(EditorDom) {
        this.EditorDom = EditorDom

        this.AlertDom = $(`<div class="ChuneditorAlert"></div>`);
        this.AlertDom.hide()
        this.AlertDom.appendTo(EditorDom)

        //代码
        this.CodeDomBox = $(`<div class="ChuneditorCodeBox"><div class="ChuneditorCode"></div><div class="ChuneditorCodeButton"><button type="button" data-type="confirm">确认</button><button type="button" data-type="cancel">取消</button></div></div>`);
        this.CodeDomBox.hide()
        this.CodeDomBox.on("click", this.codeClick)
        this.CodeDomBox.appendTo(EditorDom)
        this.CodeDom = this.CodeDomBox.children(".ChuneditorCode")


    }
    codeClick = (e) => {
        e.stopPropagation()
        let type = $(e.target).data("type")
        if (type == "confirm") {
            // new EditorView({
            //     parent: this.CodeDom[0], 
            //     extensions: [basicSetup, html()],
            //     doc:selectedDom.html()
            // }).destroy
            // this.EditorCodeClass.dispatch({
            //     changes:{from:0,insert:"ssss"}
            // })
            this.SelectedRootDom.html(this.EditorCodeClass.state.doc.toString())
            this.EditorCodeClass.destroy()   //移除
            this.CodeDomBox.hide()
        } else if (type == "cancel") {
            this.EditorCodeClass.destroy()   //移除
            this.CodeDomBox.hide()
        }
    }

    show = (domClick) => {
        //domClick：e.target  
        //根据点击的元素进行判断
        //  console.log($(domClick.target), $(domClick.target).attr("class"))

        let top = 0
        let Isshow = true
        let left = 0
        //选择，获取
        let domClickType = $(domClick.target).parents("div[data-type]")
        if (domClickType.length > 0) {
            Isshow = true
            this.SelectedRootDom = $(domClickType[0])
            $(".chunEditorContent .selected").removeClass("selected")
            domClickType.addClass("selected")
            this.#addButtons()
            top = domClickType.offset().top + domClickType.outerHeight(true)  //加height 保持在其下面 
            left = domClickType.offset().left
        } else {
            Isshow = false
        }


        if (Isshow) {
            this.AlertDom.css("left", left + "px")
            this.AlertDom.css("top", top + "px")
            this.AlertDom.show()
        } else {
            this.AlertDom.hide()
        }

    }

    reload() { 
        if (this.SelectedRootDom) {
            let top = this.SelectedRootDom.offset().top + this.SelectedRootDom.outerHeight(true)  //加height 保持在其下面 
            let left = this.SelectedRootDom.offset().left
            this.AlertDom.css("left", left + "px")
            this.AlertDom.css("top", top + "px")
        }
       
    }
    //关闭弹出
    hide() {
        this.AlertDom.hide()
    }
 

    #addButtons() {
        this.AlertDom.html("")
        this.AlertDom.append($(`<span data-type="delete">删除</span>`).on("click", (e) => {
            this.hide()
            this.SelectedRootDom.remove()
        }))
        this.AlertDom.append($(`<span data-type="config">属性</span>`).on("click", (e) => {
            //可提供的属性
            let attrs = {}
            this.#AllowAttrs.forEach(attr => {
                attrs[attr]  = this.SelectedRootDom.attr("data-"+ attr)
            }); 
            this.AttrClick(attrs)
        }))

        this.AlertDom.append($(`<span data-type="code">样式代码</span>`).on("click", (e) => {
            // e.stopPropagation()
            if (this.EditorCodeClass) {
                this.EditorCodeClass.destroy()
            }
            // let theme =  EditorView.theme({
            //     "&": {
            //       color: "white",
            //       backgroundColor: "#034"
            //     },
            //     ".cm-content": {
            //       caretColor: "#0e9"
            //     },
            //     "&.cm-focused .cm-cursor": {
            //       borderLeftColor: "#0e9"
            //     },
            //     "&.cm-focused .cm-selectionBackground, ::selection": {
            //       backgroundColor: "#074"
            //     },
            //     ".cm-gutters": {
            //       backgroundColor: "#045",
            //       color: "#ddd",
            //       border: "none"
            //     }
            //   }, {dark: true})
            this.EditorCodeClass = new EditorView({
                parent: this.CodeDom[0],
                extensions: [basicSetup, html()], 
                doc: this.SelectedRootDom.html(), 
            })
            this.CodeDomBox.show()
            this.hide()

        }))

        this.AlertDom.append($(`<span data-type="br">后换行</span>`).on("click", (e) => {
            this.SelectedRootDom.after(p(""))
            this.hide()
        }))
    }

    //更新属性,attr:属性对象
    updateAttr(attrs){  
        if (typeof attrs =="object") {
           // this.SelectedRootDom.attr(attrs)
            for (let k in attrs) { 
                if (this.#AllowAttrs.includes(k)) { 
                    this.SelectedRootDom.attr("data-"+k,attrs[k])  
                }
            }
        }else{
            console.error("updateAttr传入类型错误")
        }  
    }
}